<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>认识非遗 - 中华非遗</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="theme-about">
    <!-- 导航栏容器 -->
    <div id="navbar-container">
        <!-- 导航栏将通过组件动态生成 -->
    </div>

    <!-- 主要内容区域 -->
    <main style="margin-top: 70px;">


        <!-- 搜索区块 -->
        <section class="search-section">
            <div class="container">
                <div class="search-container">
                    <div class="search-box">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" id="heritageSearch" placeholder="搜索非遗项目、类别、地区..." class="search-input">
                        <button class="search-btn" onclick="performSearch()">
                            <i class="fas fa-arrow-right"></i>
                        </button>
                    </div>
                    <div class="search-suggestions" id="searchSuggestions">
                        <!-- 搜索建议将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
        </section>

        <!-- 非遗分类展示区块 -->
        <section class="heritage-categories">
            <div class="container">
                <div class="categories-wrapper" id="categoryWrapper">
                    <!-- 内容将通过JavaScript动态生成 -->
                </div>
            </div>
        </section>

        <!-- 显示更多按钮 -->
        <section class="show-more-section">
            <div class="container">
                <button class="show-more-btn" id="showMoreBtn" onclick="toggleMoreContent()">
                    <span class="btn-text">显示更多内容</span>
                    <i class="fas fa-chevron-down btn-icon"></i>
                </button>
            </div>
        </section>

        <!-- 更多内容模块 - 列表式布局 -->
        <section class="more-content-section" id="moreContentSection" style="display: none;">
            <div class="container">
                <h2 class="section-title-alt">
                    <i class="fas fa-list-ul"></i>
                    深度探索非遗分类
                </h2>
                
                <div class="horizontal-scroll-container">
                    <!-- 滚动提示 -->
                    <div class="scroll-hint">
                        <i class="fas fa-hand-point-right"></i>
                        <span>每个分类内可左右滑动查看更多项目</span>
                        <i class="fas fa-hand-point-left"></i>
                    </div>
                    
                    <div class="heritage-list-layout">
                        <!-- 扩展内容将通过JavaScript动态生成 -->
                    </div>
                    

                </div>
            </div>
        </section>

        <!-- 搜索结果区块 -->
        <section class="search-results" id="searchResults" style="display: none;">
            <div class="container">
                <h2 class="section-title">搜索结果</h2>
                <div id="resultsContainer" class="heritage-grid">
                    <!-- 搜索结果将动态插入这里 -->
                </div>
                <div class="no-results" id="noResults" style="display: none;">
                    <i class="fas fa-search"></i>
                    <p>未找到相关结果，请尝试其他关键词</p>
                </div>
            </div>
        </section>
    </main>

    <!-- 页面底部 -->
    <footer class="main-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>关于我们</h4>
                    <p>致力于保护和传承中华民族非物质文化遗产</p>
                </div>
                <div class="footer-section">
                    <h4>快速链接</h4>
                    <ul>
                        <li><a href="about.html">认识非遗</a></li>
                        <li><a href="explore.html">走近非遗</a></li>
                        <li><a href="heritage.html">传习非遗</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>联系我们</h4>
                    <p>邮箱: info@heritage.cn</p>
                    <p>电话: 010-12345678</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 中华非遗. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- AI对话按钮 -->
    <button class="ai-chat-button" id="aiChatButton" title="AI助手">
        <i class="fas fa-robot"></i>
    </button>

    <!-- AI对话弹窗 -->
    <div class="ai-chat-modal" id="aiChatModal">
        <div class="ai-chat-window">
            <!-- 对话窗口头部 -->
            <div class="ai-chat-header">
                <div class="ai-chat-title">
                    <i class="fas fa-robot"></i>
                    <span>非遗索思AI助手</span>
                </div>
                <button class="ai-chat-close" title="关闭">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- 对话消息区域 -->
            <div class="ai-chat-messages">
                <!-- 消息将通过JavaScript动态添加 -->
            </div>

            <!-- 输入区域 -->
            <div class="ai-chat-input-area">
                <textarea 
                    class="ai-chat-input" 
                    id="chatInput" 
                    placeholder="请输入您想了解的非遗问题..."
                    rows="1"
                ></textarea>
                <button class="ai-chat-send" id="chatSend" title="发送">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- JavaScript脚本 -->
    <script src="scripts/navbar-component.js"></script>
    <script src="scripts/ai-chat-final.js"></script>
    <script src="scripts/heritage-data.js"></script>
    <script src="scripts/heritage-renderer.js"></script>
    
    <script>
        /**
         * 切换更多内容的显示/隐藏
         * 控制显示更多按钮和更多内容模块的交互
         */
        function toggleMoreContent() {
            const moreSection = document.getElementById('moreContentSection');
            const showMoreBtn = document.getElementById('showMoreBtn');
            const btnText = showMoreBtn.querySelector('.btn-text');
            const btnIcon = showMoreBtn.querySelector('.btn-icon');
            
            if (moreSection.style.display === 'none' || !moreSection.classList.contains('active')) {
                // 显示更多内容
                moreSection.style.display = 'block';
                setTimeout(() => {
                    moreSection.classList.add('active');
                }, 10);
                
                // 更新按钮状态
                showMoreBtn.classList.add('expanded');
                btnText.textContent = '收起内容';
                btnIcon.style.transform = 'rotate(180deg)';
                
                // 平滑滚动到新内容
                setTimeout(() => {
                    moreSection.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }, 100);
                
            } else {
                // 隐藏更多内容
                moreSection.classList.remove('active');
                showMoreBtn.classList.remove('expanded');
                btnText.textContent = '显示更多内容';
                btnIcon.style.transform = 'rotate(0deg)';
                
                // 延迟隐藏以完成动画
                setTimeout(() => {
                    moreSection.style.display = 'none';
                }, 300);
                
                // 滚动回显示更多按钮
                showMoreBtn.scrollIntoView({
                    behavior: 'smooth',
                    block: 'center'
                });
            }
        }

        /**
         * 搜索功能 - 使用新的渲染系统
         */
        function performSearch() {
            const searchInput = document.getElementById('heritageSearch');
            const query = searchInput.value.trim();
            
            // 使用渲染管理器执行搜索
            heritageRenderManager.performSearch(query);
        }

        /**
         * 自动隐藏滚动提示
         */
        function hideScrollHintAfterDelay() {
            const scrollHint = document.querySelector('.scroll-hint');
            if (scrollHint) {
                setTimeout(() => {
                    scrollHint.style.opacity = '0';
                    setTimeout(() => {
                        scrollHint.style.display = 'none';
                    }, 500);
                }, 5000); // 5秒后隐藏提示
            }
        }

        /**
         * 页面初始化
         */
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化导航栏组件
            initNavbar({
                themeClass: 'theme-about'
            });
            setActiveNavPage('about.html');
            
            // 初始化渲染管理器
            heritageRenderManager.init();
            
            // 渲染所有内容
            heritageRenderManager.renderAll();
            
            // 设置搜索功能
            const searchInput = document.getElementById('heritageSearch');
            if (searchInput) {
                searchInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        performSearch();
                    }
                });
            }
            
            // 延迟初始化一些功能，确保动态内容已加载
            setTimeout(() => {
                hideScrollHintAfterDelay();
                console.log('动态数据系统初始化完成');
            }, 1000);
        });
    </script>
</body>
</html> 